<!DOCTYPE html>
<html lang="en" >
<head>
    <title>超管管理页面</title>
    <meta name="renderer" content="webkit" >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="<%=url%>">
    <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/layui/2.6.5/layui.min.js"></script>
    <link href="https://lib.baomitu.com/layui/2.6.5/css/layui.min.css" rel="stylesheet">
    <style type="text/css">
        #input-limit{
            height: 30px;
            background-color: #1e9fff;
            color: whitesmoke;
            width: 60px;
            border:1px #1e9fff;
            border-radius: 4px;
        }
        #input-limit:hover{
            background-color:#bbdaff;
        }
    </style>
</head>
<body>
<div class="layui-main">
    <!-- 表格上方标题 -->
    <blockquote class="layui-elem-quote">管理员列表</blockquote>
    <!-- 添加按钮 -->
    <a class="layui-btn layui-btn-sm" id="add-btn">添加管理员</a>
    <!--&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 患者ID:<input type="text" style="width: 200px;height: 34px;font-size:18px" id="uid"> &nbsp; &nbsp; &nbsp;  患者姓名：<input type="text" style="width: 200px;height: 34px;font-size:18px" id="uname"> &nbsp; &nbsp; <button class="layui-btn" id="limit">查询</button>-->
    <a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">账号查询:</span><input type="text" placeholder="请输入账号" id="input-uid" style="height: 30px"></a>
    <a style="margin-left: 50px"><span style="font-size: 18px;margin-right: 10px">姓名查询:</span><input type="text" placeholder="请输入姓名" id="input-uname" style="height: 30px"></a>
    <button   id="input-limit">搜索</button>
    <hr/>
    <!-- 学生信息表 -->
    <table id="tbl" lay-filter="tbl"></table>
    <script type="text/html" id="tbl-toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
</div>

<!-- 添加弹出层 -->
<div id="add-layer" style="display: none; padding: 20px">
    <form id="add-form" class="layui-form layui-form-pane">

        <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">患者ID</label>-->
        <!--<div class="layui-input-block">-->
        <!--<label>-->
        <!--<input type="text" name="uid" class="layui-input" lay-verify="required">-->
        <!--</label>-->
        <!--</div>-->
        <!--</div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">管理姓名</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="name" class="layui-input" lay-verify="required" autocomplete="off">
                </label>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">管理账号</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" id="idcardd" name="user" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="password" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="phone" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="add-form-submit">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!-- 修改弹出层 -->
<div id="update-layer" style="display: none; padding: 20px">
    <form id="update-form" class="layui-form layui-form-pane" lay-filter="update-form">
        <div class="layui-form-item">
            <label class="layui-form-label">管理编号</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="id" class="layui-input" lay-verify="required" autocomplete="off" readonly>
                </label>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">管理姓名</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="name" class="layui-input" lay-verify="required" autocomplete="off">
                </label>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">管理账号</label>
            <div class="layui-input-block">
                <label>
                    <input type="text"  name="user" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="password" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="phone" class="layui-input" lay-verify="required">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="update-form-submit">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    //设置时间格式
    function myDateFomat(t){
        var date=new Date(t);
        var y=date.getFullYear();
        var m=(date.getMonth()+1).toString().padStart(2,"0");
        var d=date.getDate().toString().padStart(2,"0");
        return y+"-"+m+"-"+d;
    }
</script>


<script>


    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        var $ = layui.$;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        table.render({
            elem: '#tbl',
            url: '/admin/admin_query',
            method: 'get',
            initSort: { //排序
                field: 'id' //排序字段，对应 cols 设定的各字段名
                , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            },
            cols: [[
                // {field: 'id', title: '患者编号'},
                {field: 'id', title: '管理编号'},
                {field: 'user', title: '管理账号'},
                {field: 'password', title: '密码'},
                {field: 'phone', title: '手机号'},
                {field: 'name', title: '管理员姓名'},
                {toolbar: '#tbl-toolbar', title: '操作', width: 200}
            ]],
            page: {
                limit: 5,//指定每页显示的条数
                limits: [5, 10, 20, 40, 50, 60, 80, 100]//每页条数的选中
            }//开启分页

            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            },
            // 表格容器id，用于表格重载
            id: 'tbl'
        });
        var AddIndex;
        // 显示添加弹出层
        $('#add-btn').click(function () {
            // 每次显示前重置表单
            $('#add-form')[0].reset();
            AddIndex = layer.open({
                type: 1,
                title: '添加管理',
                skin: 'layui-layer-molv',
                area: ['500px'],
                content: $('#add-layer')
            });
        });

        //    /////////////////

        $("#input-limit").click(function () {
            var uid=$("#input-uid").val();
            var uname=$("#input-uname").val();
            // var datt={"uid":uid,"uname":uname};
            table.render({
                elem: '#tbl',
                url: '/admin/limitAll?id='+uid+'&name='+uname,
                method: 'get',
                initSort: { //排序
                    field: 'id' //排序字段，对应 cols 设定的各字段名
                    , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                },
                cols: [[
                    // {field: 'id', title: '患者编号'},
                    {field: 'id', title: '管理编号'},
                    {field: 'user', title: '管理账号'},
                    {field: 'password', title: '密码'},
                    {field: 'phone', title: '手机号'},
                    {field: 'name', title: '管理员姓名'},
                    {toolbar: '#tbl-toolbar', title: '操作', width: 200}
                ]],
                page: {
                    limit: 5,//指定每页显示的条数
                    limits: [5, 10, 20, 40, 50, 60, 80, 100]//每页条数的选中
                }//开启分页

                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                    var result;
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    } else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };
                },
                // 表格容器id，用于表格重载
                id: 'tbl'
            })
        })
/////////////////////////////////////////////////////


//////////////








        // 添加表单提交
        form.on('submit(add-form-submit)',function (data) {
            // ajax方式添加
            $.get("/admin/admin_insert",data.field,function (data) {
                if(data==true){
                    layer.close(AddIndex);
                    layer.msg('添加成功');
                    table.reload('tbl');
                }else {
                    layer.msg('添加失败');
                }
            })
            // 阻止表单跳转
            return false;
        });


        table.on('tool(tbl)', function (obj) {
            // 获取当前行数据和lay-event的值
            var data = obj.data;
            var event = obj.event;
            // 删除事件
            if (event === 'del') {
                layer.confirm('确定删除该吗？', function (index) {
                    console.log(index)
                    console.log(data.uid)
                    // ajax方式删除
                    $.get("/admin/admin_delete",{id:data.id},function (data) {
                        if(data==true){
                            layer.msg('删除成功');
                            table.reload('tbl');
                        }else {
                            layer.msg('删除失败');
                        }
                    })
                    layer.close(index);
                });
            }
            var UpIndex;
            // 修改数据回显
            if (event === 'edit') {
                // 表格数据回显
                form.val('update-form', {
                    "id": data.id,
                    "name": data.name,
                    "user":data.user,
                    "password":data.password,
                    "phone":data.phone,
                });
                // 显示修改表单的弹出层

                UpIndex= layer.open({
                    type: 1,
                    title: '更新管理员信息',
                    skin: 'layui-layer-molv',
                    area: ['500px'],
                    content: $('#update-layer')
                });
                // 修改表单提交
                form.on('submit(update-form-submit)',function (data) {
                    // ajax方式修改
                    $.get("/admin/admin_update",data.field,function (data) {
                        if(data==true){
                            layer.close(UpIndex);
                            layer.msg('更新成功');
                            table.reload('tbl');
                        }else {
                            layer.msg('更新失败');
                        }
                    })
                    // 阻止表单跳转
                    return false;
                });
            }
        });
    })


</script>
</body>
</html>